<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
</head>
<body>


<div class="one">
    <span abc="abc">1111</span>
    <!--我是注释-->
    <span></span>
    <span></span>
    <span></span>
    <div></div>
</div>

<script>

    // 1. 创建一个元素对象
    let span = document.createElement("span")
    span.innerHTML = "abc"
    // 2.放入到相应的地方

    //2.1. 追加到父元素的最后
    //document.body.appendChild(div)
    // 2.2 插入到某个元素的前面
    // document.body.insertBefore(span,document.querySelector("div"))
    // // 2.3 如何插入到某个元素的后面
    //
    function insertAfter(parent,current,news){
        let nextele=next(current)
        parent.insertBefore(news,nextele)
    }
    // // 1. 如何查看在一个元素里面有多少个子元素
    // let one = document.querySelector(".one")
    // insertAfter(document.body,one,document.createElement("span"))

let one = document.querySelector(".one")

document.body.replaceChild(document.createElement("span"),one)

//document.body.removeChild(one)
    function getChild(parent) {
        let childs = parent.childNodes
        let son = []
        for (let i = 0; i < childs.length; i++) {
            if (childs[i].nodeType == 1) {
                son.push(childs[i])
            }
        }
        return son
    }

    // 2. 如何获得下个元素

    //console.log(one.nextSibling)
    console.log(next(one))

    function next(current) {
        let next = current.nextSibling
        if (next == null) {
            return next
        }
        while (next.nodeType != 1) {
            next = next.nextSibling
            if (next == null) {
                return next
            }
        }
        return next
    }

    // 3. 如何获取上一个元素
    console.log(pre(one))

    function pre(current) {
        let pre = current.previousSibling
        if (pre == null) {
            return pre
        }
        while (pre.nodeType != 1) {
            pre = pre.previousSibling
            if (pre == null) {
                return pre
            }
        }
        return pre
    }

    // 获得父节点




</script>

</body>
</html>